<template>
  <div>
    <div class="content">
      <div class="items"
           v-for="(item,index) in nameLists"
           :key="index">
        <div class="details">
          <div class="name">
            <span style="color: #2e2e2e">
              {{item.xing}}
            </span>
            <span style="color: #4d67dc">
              {{item.ming}}
            </span>
          </div>
          <div class="mark">{{Number(item.score)}}<span style="font-size: 8px">分</span></div>
          <div class="wu-xing">
            {{item.wuxing}}
          </div>
          <div @click="check(item)"
               :class="['collected',{'no-heart-icon':!item.heartIcon},{'heart-icon':item.heartIcon}]">

          </div>
        </div>
        <div class="go-details"
             @click="goDetails(
                                            item.xing,
                                            item.ming,
                                            item.score,
                                            item.heartIcon,
                                            )">
          查看详情
        </div>
      </div>
    </div>
    <clientBtn></clientBtn>
  </div>
</template>

<script>
import clientBtn from '../../components/clientBtn'
export default {
  components: {
    clientBtn
  },
  data () {
    return {
      nameLists: [],
    }
  },
  methods: {
    //收藏取消
    check (val) {
      this.$ajax.post(val.heartIcon ? '/util/unCollectName' : '/util/collectName', {
        "xing": val.xing,
        "ming": val.ming
      }).then(res => {
        if (res.data.code == 0) {
          this.$message({
            message: val.heartIcon ? '收藏成功' : '收藏取消',
            type: 'success'
          });
        } else {
          this.$message.error(res.data.msg);
        }
      });
      this.$set(val, 'heartIcon', !val.heartIcon);
      // console.log(val);
    },
    //获取列表
    getLists () {
      this.$ajax.post('/util/collections', {}).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          this.nameLists = res.data.data;
          for (let i = 0; i < this.nameLists.length; i++) {
            this.$set(this.nameLists[i], 'heartIcon', true)
          };
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //看详情
    goDetails (val1, val2, val3, val4) {
      let link = this.$router.resolve({
        path: '/name_analysis',
        query: {
          firstName: val1,
          lastName: val2,
          score: val3,
          heartIcon: val4
        }
      });
      window.open(link.href, '_blank')
    }
  },
  mounted () {
    this.getLists();
    _MEIQIA('hidePanel');
  }
}
</script>

<style scoped>
.content {
  width: 1080px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.items {
  width: 240px;
  height: 120px;
  background: #ffffff;
  margin-left: 30px;
  margin-bottom: 40px;
  box-shadow: 3px 3px 3px #ebeffd;
  border-radius: 7px;
}
.details {
  width: 210px;
  height: 50%;
  border-bottom: 1px solid #ebeef4;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.name {
  font-size: 15px;
}
.mark {
  color: #ffffff;
  background: #ff5f5f;
  font-size: 13px;
  height: 20px;
  line-height: 20px;
  padding: 0 6px;
  border-radius: 4px;
}
.wu-xing {
  font-size: 14px;
  color: #9d9d9d;
}
.collected {
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
  background-size: 25px 25px;
  background-position: center;
}
.no-heart-icon {
  background-image: url(../../assets/images/classicName/no_heart.png);
}
.heart-icon {
  background-image: url(../../assets/images/classicName/heart.png);
}
.go-details {
  color: #4d67dc;
  font-size: 14px;
  text-align: center;
  height: 50%;
  line-height: 60px;
  cursor: pointer;
}
</style>